<template>
  <div>
    <div class="card-Box">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="aui-card--fill">
      <div class="mod-sys__role ">
        <div class="userBox">
          <div class="userListText">定时任务</div>
        </div>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle" style="width: 100%;">
          <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ms" label="毫秒" header-align="center" align="center"></el-table-column>
          <el-table-column prop="remark" :label="$t('schedule.remark')" header-align="center"
            align="center"></el-table-column>
          <el-table-column prop="status" :label="$t('schedule.status')" header-align="center" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" size="success">启动</el-tag>
              <el-tag v-else size="small" type="danger">停止</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === 0" type="success" round size="mini"
                @click="changeStatus(scope.row.status, scope.row.id)">启动</el-button>
              <el-button v-if="scope.row.status === 1" type="danger" round size="mini"
                @click="changeStatus(scope.row.status, scope.row.id)">停止</el-button>
              <el-button v-if="scope.row.status === 0" type="primary" round size="mini"
                @click="addOrUpdateHandle(scope.row.id, false)">配置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        <!-- 弹窗, 日志列表 -->
        <log v-if="logVisible" ref="log"></log>
      </div>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './schedule-add-or-update'
import Log from './schedule-log'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/psc/timedtask/page',
        getDataListIsPage: true,
        deleteURL: '/sys/schedule',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        beanName: '',
        name: '',
        ms: '',
        status: '',
      },
      logVisible: false
    }
  },
  components: {
    AddOrUpdate,
    Log
  },
  methods: {
    // // 暂停
    // pauseHandle (id) {
    //   if (!id && this.dataListSelections.length <= 0) {
    //     return this.$message({
    //       message: this.$t('prompt.deleteBatch'),
    //       type: 'warning',
    //       duration: 500
    //     })
    //   }
    //   this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.pause') }), this.$t('prompt.title'), {
    //     confirmButtonText: this.$t('confirm'),
    //     cancelButtonText: this.$t('cancel'),
    //     type: 'warning'
    //   }).then(() => {
    //     this.$http.put('/sys/schedule/pause', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
    //       if (res.code !== 0) {
    //         return this.$message.error(res.msg)
    //       }
    //       this.$message({
    //         message: this.$t('prompt.success'),
    //         type: 'success',
    //         duration: 500,
    //         onClose: () => {
    //           this.getDataList()
    //         }
    //       })
    //     }).catch(() => {})
    //   }).catch(() => {})
    // },
    // // 恢复
    // resumeHandle (id) {
    //   if (!id && this.dataListSelections.length <= 0) {
    //     return this.$message({
    //       message: this.$t('prompt.deleteBatch'),
    //       type: 'warning',
    //       duration: 500
    //     })
    //   }
    //   this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.resume') }), this.$t('prompt.title'), {
    //     confirmButtonText: this.$t('confirm'),
    //     cancelButtonText: this.$t('cancel'),
    //     type: 'warning'
    //   }).then(() => {
    //     this.$http.put('/sys/schedule/resume', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
    //       if (res.code !== 0) {
    //         return this.$message.error(res.msg)
    //       }
    //       this.$message({
    //         message: this.$t('prompt.success'),
    //         type: 'success',
    //         duration: 500,
    //         onClose: () => {
    //           this.getDataList()
    //         }
    //       })
    //     }).catch(() => {})
    //   }).catch(() => {})
    // },
    // // 执行
    // runHandle (id) {
    //   if (!id && this.dataListSelections.length <= 0) {
    //     return this.$message({
    //       message: this.$t('prompt.deleteBatch'),
    //       type: 'warning',
    //       duration: 500
    //     })
    //   }
    //   this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.run') }), this.$t('prompt.title'), {
    //     confirmButtonText: this.$t('confirm'),
    //     cancelButtonText: this.$t('cancel'),
    //     type: 'warning'
    //   }).then(() => {
    //     this.$http.put('/sys/schedule/run', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
    //       if (res.code !== 0) {
    //         return this.$message.error(res.msg)
    //       }
    //       this.$message({
    //         message: this.$t('prompt.success'),
    //         type: 'success',
    //         duration: 500,
    //         onClose: () => {
    //           this.getDataList()
    //         }
    //       })
    //     }).catch(() => {})
    //   }).catch(() => {})
    // },
    // 日志列表
    logHandle() {
      this.logVisible = true
      this.$nextTick(() => {
        this.$refs.log.init()
      })
    },
    changeStatus(status, id) {
      var obj = {
        id: id,
        status: status === 1 ? 0 : 1,
      }
      this.$http.put('/psc/timedtask', obj).then((res) => {
        if (res.data.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          // onClose: () => {
          //   this.visible = false
          //   this.$emit('refreshDataList')
          // }
        })
      }).then(() => {
        this.$http.get('/psc/timedtask/page').then((res) => {
          this.dataList = res.data.data.list
        })
      })
    }
  }
}
</script>
<style scoped>
.card-Box {
  width: 100%;
  height: 7.6vh;
  line-height: 7.6vh;
  padding: 0 1.8vw;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.card-Box>>>.el-form--inline .el-form-item__content,
.el-form--inline .el-form-item {
  vertical-align: middle !important;
}

.card-Box>>>.el-form-item {
  margin-bottom: 0;
}

.aui-card--fill {
  width: 100%;
  /* height: 750px; */
  padding: 1.8vh 2vw 1.8vh 2vw;
  background-color: #fff;
  border-radius: 10px;
}

.selectRegion {
  width: 100%;
  height: 10vh;
}

/* .mod-sys__user{
    position: relative;
  } */
.search {
  /* margin-left: 6.25vw;
    width: 5.9vw;
    height: 3.8vh; */
}

.reset {
  width: 5.9vw;
  height: 3.8vh;
  margin-left: 1.875vw;
  background-color: rgba(180, 196, 209, 1);
  border: 1px solid rgba(180, 196, 209, 1);
}

.userBox {
  display: flex;
  position: relative;
  width: 100%;
  height: 3vh;
  margin-bottom: 1.9vh;
}

.userListText {
  width: 5vw;
  height: 3vh;
  line-height: 3vh;
  font-size: 16px;
}

.newAdd {
  position: absolute;
  right: 0;
  width: 5.9vw;
  height: 3vh;
  padding: 0;
}

.aui-card--fill>>>.el-table__fixed-right {
  height: 100% !important;
}</style>